[Javascript] Understanding ES2020 Optional Chaining Operator

# ES2020 Optional Chanaing operator

Among the various features added after ES6, Optional chaining is considered to be a very useful and highly preferred one. As the name suggests, Optional chaining is an operator that selectively performs chaining on objects. Simply put, it allows you to use a value depending on the existence of properties that an object has.

To explain this, let's create an object called myObj and see how it works.

Looking at the above code, the object myObj has a property a and also has an object { aa: 1 } as its value. Below, we created a new variable yourNum and assigned the value of myObj.a.aa to it. When we checked the result, it worked properly without any errors.

"If the values of a or aa do not exist within myObj, what happens?"

However, depending on the situation, the properties of an object may not exist. That is, if the values are obtained through a server API, it may not always be known if the properties exist. If the value is actually non-existent, an error will occur as follows...



@ The solutions that have been frequently used
Various methods that are cumbersome and impair readability have been used to solve this kind of problem ~ I have seen and written a lot of codes like the ones used below...

Or ...

Or you could also use it like this.

Ultimately, these are the processes of checking for the existence of properties within an object to prevent errors from occurring. In addition to the above methods, you can also use Lodash methods. If you use _.get(), you can write code like the following.

The discussion has become too long... Now, let's see how the above code changes with the use of Optional Chaining.

! Example of Optional Chaining

Using Optional Chaining in the above code is very simple. All you have to do is add a ? after the object's property. That is, if we use Optional Chaining in the above code, we can express it as follows.

Among the examples above, the following code represents the case where the property does not exist. In this case, the value of undefined is declared and no runtime error is generated, making this method very useful. When applying this method to all existing codes, the code length can be reduced and readability can be increased.

So far, we have briefly looked at Optional Chaining.


By the way, post-ES6 syntax is transpiled into the previous syntax using a transpiler such as babel when deployed in a live environment. Depending on the development environment, this process may be necessary, so please keep this in mind.